<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
        <script type="text/javascript" src="../common/echarts.min.js"></script>
        <link rel="stylesheet" href="../common/index.css">
        <title>分拣计划完成进度看板</title>
        <script type="text/javascript">
            var myPieEcharts=null;
            window.onload=function(){
                // 获取巷道
                var data=[];
                var roadwayNumber=Math.floor(Math.random() * 20) + 1;
                for (let i = 0; i < roadwayNumber; i++) {
                    var status=Math.floor(Math.random() * 2);
                    data.push({
                        matchingType:"DDA-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        materialName:"MN-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        materialCode:"CODE-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        caseNumber:(Math.floor(Math.random() * 10000000000) + 1).toString().padStart(10,'0'),
                        sortie:(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        batchNumber:(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        aoCode:"OACODE-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        status:status==0?"未完成":"已完成",
                        statusCode:status
                    });
                }
                tableScroll(data);
                let completed=data.filter(a=>a.statusCode==1).length; 
                $(".totali").html(data.length)
                $(".completed").html(completed)
                $(".uncompleted").html(data.length-completed)
                myPieChart(completed,data.length-completed);
            }
            //滚动表格
            function tableScroll(data) {
                let processList = data;
                let processHtml = '<ul class="list tableList">';
                processList.forEach(element => {
                    processHtml += ('<li class="item status_'+element.statusCode+'">'+
                        '<span style="width:25%">' + element.matchingType + '</span>'+
                        '<span style="width:25%">' + element.materialName + '</span>'+
                        '<span style="width:25%">' + element.materialCode + '</span> ' +
                        '<span style="width:25%">' + element.caseNumber + '</span>'+
                        '<span style="width:25%">' + element.sortie + '</span>'+
                        '<span style="width:25%">' + element.batchNumber + '</span>'+
                        '<span style="width:25%">' + element.aoCode + '</span>'+
                        '<span style="width:25%">' + element.status + '</span>');
                });

                processHtml += '</ul>';

                const $processTd = $(".process-td");

                $processTd.html(processHtml);

                var containerHeight = $processTd.height();
                var itemHeight = ($processTd.find('li').outerHeight(true)/1.3);
                if (processList.length >= Math.round(containerHeight / itemHeight)) {
                    let a = 0;
                    const ls = $processTd.find('li').length;
                    scrollInterval = setInterval(function () {
                        a++;
                        if (a >= ls) {
                            clearInterval(scrollInterval);
                            // 重置滚动位置
                            $processTd.find('ul').stop().css({ marginTop: 0 });
                            // 触发数据刷新
                            boardCreate();
                        } else {
                            $processTd.find('ul').stop().animate({ marginTop: -itemHeight * a }, 1000, 'linear');
                        }
                    }, 2500);
                }

            }
            function myPieChart(completed,uncompleted) {
                myPieEcharts = echarts.init(document.getElementById('myPieChart'));
                var option = {
                        title: {
                            text: `完成度: ${Math.round(((completed/(uncompleted+completed))*100)).toString()}%`,
                            x: 'center',
                            y: 'center',
                            itemGap: 10,
                            textStyle: {
                                color: '#fff',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                                fontWeight: 'bolder'
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center',
                            show:false
                        },
                        grid: {
                            bottom : '30',
                            containLabel: true // 如果需要饼图标签包含在图中，则启用此选项
                        },
                        series: [{
                            type: 'pie',
                            radius: [125, 180],
                            avoidLabelOverlap: false,
                            padAngle: 5,
                            itemStyle: {
                                borderRadius: 10
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: completed, name: '已完成' },
                                { value: uncompleted, name: '未完成',
                                    itemStyle:{color: 'rgba(0,0,0,0)'},
                                    show:false
                                },
                            ]
                        }
                    ]
                };
                myPieEcharts.setOption(option);
            }
            function updateMyPieChart(completed,uncompleted) {
                myPieEcharts.setOption({
                    series: [{
                        data: [
                            { value: completed, name: '已完成' },
                            { value: uncompleted, name: '未完成',
                                itemStyle:{color: 'rgba(0,0,0,0)'},
                                show:false
                            },
                        ]
                    }]
                });
            }
            function toggle(buttonElement){
                $(".toggle").removeClass().addClass("toggle").addClass("nobutton");
                $(buttonElement).removeClass().addClass("toggle").addClass("button");
            }
            function boardCreate() {
                // 获取巷道
                var data=[];
                var roadwayNumber=Math.floor(Math.random() * 20) + 1;
                for (let i = 0; i < roadwayNumber; i++) {
                    var status=Math.floor(Math.random() * 2);
                    data.push({
                        matchingType:"DDA-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        materialName:"MN-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        materialCode:"CODE-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        caseNumber:(Math.floor(Math.random() * 10000000000) + 1).toString().padStart(10,'0'),
                        sortie:(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        batchNumber:(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        aoCode:"OACODE-"+(Math.floor(Math.random() * 100) + 1).toString().padStart(3,'0'),
                        status:status==0?"未完成":"已完成",
                        statusCode:status
                    });
                }
                tableScroll(data);
                let completed=data.filter(a=>a.statusCode==1).length; 
                $(".totali").html(data.length)
                $(".completed").html(completed)
                $(".uncompleted").html(data.length-completed)
                updateMyPieChart(completed,data.length-completed);
            }
        </script>
        <style type="text/css">
            .title{
                color: #68d8fe;
                display: flex;
                justify-content: center;
                font-size: 3vw;
                padding-top: 1vw;
            }
            .button{
                color: #fff;
                background-color: rgb(3, 191, 191);
                border: .1vw solid rgb(175, 175, 175);
            }
            .nobutton{
                color: #000;
                background-color: rgb(215, 215, 215);
                border: .1vw solid rgb(175, 175, 175);
            }
            .title-statistics{
                background-color: rgb(20, 26, 56);
                color: #fff;
                display: flex;
                justify-content: center;
                padding: 1vw 0;
            }
            .list {
                padding: 0;
            }
            .list {
                .item {
                    padding: 0.3125rem 0;
                }
            }
            .process-td{
                background-color: transparent;
            }
            .item{
                margin: 1vw 0;
            }
            .status_1{
                color: rgb(9, 208, 214);
            }
            .status_0{
                color: red;
            }
        </style>
        <div class="main">
            <div class="title">分拣计划完成进度看板</div>
            <div style="display: flex ;justify-content: center">
                <div style="display: flex ;justify-content: flex-end;flex-direction: row;width: 98%;padding: 1vw 0;">
                    <div><button class="button toggle" onclick="toggle(this)">本月</button></div>
                    <div><button class="nobutton toggle" onclick="toggle(this)">本周</button></div>
                    <div><button class="nobutton toggle" onclick="toggle(this)">当日</button></div>
                </div>
            </div>
            <div style="display: flex ;justify-content: center">
                <div style="width: 98%;display: flex;justify-content: space-between;">
                    <div class="title-statistics" style="width: 63%;">当日分拣任务</div>
                    <div class="title-statistics" style="width: 33%;">当日分拣任务统计</div>
                </div>
            </div>
            <div style="display: flex ;justify-content: center;height: 76%;">
                <div style="width: 98%;display: flex;justify-content: space-between;">
                    <div style="width: 63%;">
                        <div>
                            <ul class="list">
                                <li class="item">
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">配套类型</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">物料名称</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">物料编码</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">箱号</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">架次</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">批次</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">AO编码</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">状态</span>
                                </li>
                            </ul>
                        </div>
                        <div class="process-td"></div>
                    </div>
                    <div style="width: 33%;">
                        <div>
                            <ul class="list">
                                <li class="item">
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">计划</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">完成</span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;">未完成</span>
                                </li>
                                <li class="item">
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;" class="totali"></span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;" class="completed"></span>
                                    <span style="width:25%;color: rgb(9, 208, 214);text-align: center;" class="uncompleted"></span>
                                </li>
                            </ul>
                        </div>
                        <div style="width: 100%;height: 75%;" id="myPieChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>